import React, { useState } from 'react'
import "./css/deliveryorder.css"
import { ClearOutlined, UserOutlined, ShopOutlined,ClockCircleOutlined } from '@ant-design/icons';
import img from '../../assets/imgs/1.jpg'
import { SpaceContext } from 'antd/es/space';
import Pagesize from './Pagesize';
export default function DeliveryOrder() {
  // 搜索对象值
  const [search, setsearch] = useState({
    // 订单编号
    _id: '',
    // 商品名称
    goodsname: '',
    // 店铺名称
    shopname: '',
    // 买家昵称
    buyname: '',
    // 收货人
    receivename: '',
    // 配送员
    deliveryname: '',
    // 手机号码
    phonenumber: '',
    // 创建时间
    createtime: 0,
    // 订单状态
    orderstatus: 0
  })
  // 当前分类状态值为配送异常订单
  const [deliveryorder, setdeliveryorder] = useState("配送异常订单")
  // 配送订单异常的选项数组
  const [ordertype, setordertype] = useState([
    { name: '全部异常状态', value: 0 },
    { name: '未到店预警', value: 5 },
    { name: '未离店预警', value: 4 },
    { name: '未送达预警', value: 3 },
    { name: '超时未到店', value: 2 },
    { name: '超时未送达', value: 1 },
    { name: '待商家退款', value: 7 },
    { name: '商家拒绝退款', value: 6 },
  ])
  // 历史订单的选项组
  const [historyorder, sethistoryorder] = useState([
    { name: '全部完结状态', value: 8 },
    { name: '交易成功', value: 9 },
    { name: '交易关闭', value: 10 },
  ])
  // 全部订单的选项组
  const [allorder, setallorder] = useState([
    { name: '全部', value: 11 },
    { name: '待骑手接单', value: 12 },
    { name: '配送中', value: 13 },
    { name: '配送超时', value: 14 },
    { name: '待商家退款', value: 15 },
    { name: '商家拒绝退款', value: 16 },
    { name: '交易成功', value: 9 },
    { name: '交易关闭', value: 10 },
  ])
  // 配送异常订单数量，默认值零，变量接收
  const [deliveryorderNum, setdeliveryorderNum] = useState(0)
  // 历史订单数量，默认为零，变量接收
  const [historyorderNum, sethistoryorderNum] = useState(0)
  // 全部订单数量，默认为零，变量接收
  const [allorderNum, setallorderNum] = useState(0)
  // 模拟订单数据
  const [orderlist, setorderlist] = useState([
    {
      // 订单编号
      _id: '20230901',
      // 店铺名称
      shopname: '店铺名称好再来',
      // 买家名称
      buyname: '买家昵称99',
      // 收货人名称
      receivename: '收货人理论',
      // 配送员名称
      deliveryname: '配送员效率',
      // 配送员手机号
      phonenumber: '手机号1212',
      // 订单创建时间
      createtime: '2023-09-01',
      // 订单配送状态 ,12:待骑手接单，13：配送中，14：配送超时，15：待商家退款，16：商家拒绝退款，9：交易成功，10：交易关闭
      orderstatus: 13,
      // 订单异常状态,默认为空，1为超时未送达，2为超时未到店，3为未送达预警，4为未离店预警，5为未到店预警
      orderabnormal: 2,
      // 订单售后状态，只有 待商家退款、商家拒绝退款，默认为null，6为商家拒绝退款，7为待商家退款
      orderafter: 6,
      // 订单商品列表
      oderlist: [
        { goodsname: '金针榴莲', size: "七寸", spicy: "中辣", price: 88, oldprice: 99, num: 1 },
        { goodsname: '送落汤', size: "", spicy: "", price: 100, oldprice: null, num: 2  },
      ],
      // 总价
      totalprice: 1000,
      // 申请退款原因
      refundreason: '不想要了',
    },

  ])
  return (
    <div className='deliveryorder'>
      <div className="nav">
        <div className="icon"></div>
        <span>配送订单</span>
      </div>
      <div className="search">
        {/* 订单分类 */}
        <ul className='ordertype'>
          <li
            style={deliveryorder === '配送异常订单' ? { color: '#333333', fontWeight: 600 } : {}}
            onClick={() => {
              setdeliveryorder("配送异常订单")
            }}
          >配送异常订单({deliveryorderNum})</li>
          <li
            style={deliveryorder === '历史订单' ? { color: '#333333', fontWeight: 600 } : {}}
            onClick={() => {
              setdeliveryorder("历史订单")
            }}
          >历史订单({historyorderNum})万</li>
          <li
            style={deliveryorder === '全部订单' ? { color: '#333333', fontWeight: 600 } : {}}
            onClick={() => {
              setdeliveryorder("全部订单")
            }}
          >全部订单({allorderNum})万</li>
        </ul>
        {/* input选项框 */}
        <div className="select_div">
          <div className="search_item">
            <div className='biao'>订单编号:</div><input type="text"
              placeholder='请输入订单号'
              value={search._id}
              onChange={(e) => {
                setsearch({
                  ...search,
                  _id: e.target.value
                })
              }}
            />
          </div>
          <div className="search_item">
            <div className='biao'>商品名称:</div><input type="text"
              placeholder='请输入商品名称'
              value={search.goodsname}
              onChange={(e) => {
                setsearch({
                  ...search,
                  goodsname: e.target.value
                })
              }}
            />
          </div>
          <div className="search_item">
            <div className='biao'>店铺名称:</div><input type="text"
              placeholder='请输入店铺名称'
              value={search.shopname}
              onChange={(e) => {
                setsearch({
                  ...search,
                  shopname: e.target.value
                })
              }}
            />
          </div>
          <div className="search_item">
            <div className='biao'>买家昵称:</div><input type="text"
              placeholder='请输入买家昵称'
              value={search.buyname}
              onChange={(e) => {
                setsearch({
                  ...search,
                  buyname: e.target.value
                })
              }}
            />
          </div>
          <div className="search_item">
            <div className='biao'>收货人:</div>
            <input type="text"
              placeholder='请输入收货人姓名'
              value={search.receivename}
              onChange={(e) => {
                setsearch({
                  ...search,
                  receivename: e.target.value
                })
              }}
            />
          </div>
          <div className="search_item">
            <div className='biao'>配送员:</div>
            <input type="text"
              placeholder='请输入配送员姓名'
              value={search.deliveryname}
              onChange={(e) => {
                setsearch({
                  ...search,
                  deliveryname: e.target.value
                })
              }}
            />
          </div>
          <div className="search_item">
            <div className='biao'>手机号码:</div>
            <input type="text"
              placeholder='请输入任意人手机号'
              value={search.phonenumber}
              onChange={(e) => {
                setsearch({
                  ...search,
                  phonenumber: e.target.value
                })
              }}
            />
          </div>
          <div className="search_item">
            <div className='biao'>创建时间:</div>
            <select
              value={search.createtime}
              onChange={(e) => {
                setsearch({
                  ...search,
                  createtime: Number(e.target.value)
                })
              }}
            >
              <option value="0">全部</option>
              <option value="1">本月内</option>
              <option value="2">近三个月</option>
              <option value="3">今年内</option>
              <option value="4">2021年</option>
              <option value="5">2020年</option>
              <option value="6">2020年以前</option>
            </select>
          </div>
          <div className="search_item">
            <div className='biao'>订单状态:</div>
            <select
              value={search.orderstatus}
              onChange={(e) => {
                setsearch({
                  ...search,
                  orderstatus: Number(e.target.value)
                })
              }}
            >
              {deliveryorder === '配送异常订单' ? (
                ordertype.map((item, index) => {
                  return <option value={item.value} key={index}>{item.name}</option>
                })
              ) : deliveryorder === '历史订单' ? (
                historyorder.map((item, index) => {
                  return <option value={item.value} key={index}>{item.name}</option>
                })
              ) : allorder.map((item, index) => {
                return <option value={item.value} key={index}>{item.name}</option>
              })}

            </select>
          </div>
          <div className="search_item2">
            <button onClick={() => {
              console.log(search);
            }}>搜索</button>
            <span onClick={() => {
              setsearch({
                _id: '',
                goodsname: '',
                shopname: '',
                buyname: '',
                receivename: '',
                deliveryname: '',
                phonenumber: '',
                createtime: 0,
                orderstatus: 0
              })
            }}><ClearOutlined />清除条件</span>
          </div>
          <div className="search_item2">
          </div>
          <div className="search_item2">
          </div>


        </div>
      </div>
      <div className="content">
        <div className="table">
          <div className="shopname">商品</div>
          <div className="shouhuoname">收货人</div>
          <div className="peisong">配送员</div>
          <div className="yingfukuan">应付款</div>
          <div className="shouhou">售后</div>
          <div className="status">交易状态</div>
          <div className="caozuo">操作</div>
        </div>
        <div className="shopcontent">
          {
            orderlist.map((item, index) => {
              return (
                <div className="shopcontent_item">
                  <div className="dingdandail">
                    <div className="spandiv">
                      <span style={{ fontSize: "12px", color: "#999999" }}>订单号:{item._id}</span>
                      <span style={{ fontSize: "12px", color: "#999999" }}>创建时间:{item.createtime}</span>
                      <span style={{ fontSize: "12px", color: "#999999" }}>买家:{item.buyname}</span>
                    </div>
                    <div className="dizhi">
                      <span style={{ fontSize: "12px", color: "#999999" }}><ShopOutlined />{item.shopname}</span>
                    </div>

                  </div>
                  <div className="shopcontent_item_content">
                    <div className="shop_left">
                      {item.oderlist.map((item, index) => {
                        return (
                          <div className="shopbox">
                            <div className="shop_introduce">
                              <img src={img} alt="adf" style={{ width: '50px', height: '50px', borderRadius: '5px' }} />
                              <div className="miao">
                                <p style={{ fontSize: "13px", fontWeight: 600, color: "#42444b" }}>{item.goodsname}</p>
                                {item.size && <p style={{ fontSize: "12px", color: "#999999" }}>规格:{item.size}</p>}
                                {item.spicy && <p style={{ fontSize: "12px", color: "#999999" }}>辣度:{item.spicy}</p>}
                              </div>
                            </div>
                            <div className="shop_price">
                              <p style={{ fontSize: "13px", fontWeight: 600, color: "#42444b" }}>￥{item.price}</p>
                              {item.oldprice && <p style={{ fontSize: "12px", color: "#999999" }}>(原价:￥{item.oldprice})</p>}
                            </div>
                            <div className="shop_buy">
                              <p style={{ fontSize: "13px", fontWeight: 600, color: "#42444b" }}>x{item.num}</p>
                            </div>
                          </div>
                        )
                      })}
                    </div>
                    <div className="shop_shou">
                      <p style={{ fontSize: "13px", fontWeight: 600, color: "#42444b" }}>{item.receivename}<span style={{ fontSize: "12px", color: "#999999" }}><UserOutlined /></span></p>
                    </div>
                    <div className="shop_pei">
                      <p style={{ fontSize: "13px", fontWeight: 600, color: "#42444b" }}>{item.deliveryname}</p>
                      <p style={{ fontSize: "12px", color: "#999999" }}>{item.phonenumber}</p>
                    </div>
                    <div className="shop_ying">
                      <p style={{ fontSize: "13px", fontWeight: 600, color: "#42444b" }}>￥{item.totalprice}</p>
                      <p style={{ fontSize: "12px", color: "#999999" }}>(含打包:￥1.00,配送:￥4.00优惠:-￥5.00)</p>
                    </div>
                    <div className="shop_shou">

                      {(item.orderafter) ? (
                        <div style={{ display: "flex", justifyContent: "space-between", flexDirection: "column", alignItems: "center" }}>
                          <p style={{ fontSize: "13px", fontWeight: 600, color: "#42444b" }}>
                            {item.orderafter === 6 ? "商家拒绝退款" : "待商家退款"}
                          </p>
                          <p style={{ fontSize: "12px", color: "#3478F6",cursor:'pointer' }}>详情</p>
                        </div>
                      ) : null}
                    </div>
                    <div className="shop_jiao">
                      <p style={{ fontSize: "13px", fontWeight: 600, color: "#42444b" }}>
                        {item.orderstatus === 5 ? '未到店预警' : item.orderstatus === 4 ? '未离店预警'
                          : item.orderstatus === 3 ? '未送达预警' : item.orderstatus === 2 ?
                            '超时未到店' : item.orderstatus === 1 ? '超时未送达' : item.orderstatus === 7 ? '待商家退款'
                              : item.orderstatus === 6 ? '商家拒绝退款' : item.orderstatus === 12 ? '待骑手接单' :
                                item.orderstatus === 13 ? '配送中' : item.orderstatus === 14 ? '配送超时'
                                  : item.orderstatus === 15 ? '待商家退款' : item.orderstatus === 16 ? '商家拒绝退款'
                                    : item.orderstatus === 17 ? '交易成功' : item.orderstatus === 18 ? '交易关闭' : item.orderstatus === 9
                                      ? '交易成功' : item.orderstatus === 10 ? '交易关闭' : ""}
                      </p>
                      {/* 根据状态进行颜色更改 ==========*/}
                      <p style={{ fontSize: "12px", color: "#3478F6" }}>
                        {(item.orderabnormal === 3 || item.orderabnormal === 4 || item.orderabnormal === 5) ? (<span
                          style={{ color: "#FF9900" }}
                        ><ClockCircleOutlined />{item.orderabnormal === 3 ? "未送达预警" : item.orderabnormal === 4 ? "未离店预警" : item.orderabnormal === 5 ? "未到店预警" : null}</span>) : null}
                        {(item.orderabnormal === 1 || item.orderabnormal === 2) ? (<span
                          style={{ color: "#FF0000" }}
                        ><ClockCircleOutlined />{item.orderabnormal === 1 ? "超时未送达" : item.orderabnormal === 2 ? "超时未到店" : null}</span>) : null}
                      </p>
                    </div>
                    <div className="shop_cao">
                      <p style={{ fontSize: "12px", color: "#3478F6",cursor:'pointer' }}>订单详情</p>
                      <p style={{ fontSize: "12px", color: "#3478F6" ,cursor:'pointer'}}>订单跟踪</p>
                      <p style={{ fontSize: "12px", color: "#3478F6",cursor:'pointer' }}>调度跟踪</p>
                    </div>
                  </div>
                </div>
              )
            })
          }
        </div>
        {/* 页码 */}
        <div className="page">
        <Pagesize  total={30} pageSize={10} current={1} onChange={(page)=>{console.log(page)}}/>
        </div>
      </div>
    </div>
  )
}
